<div id="mqcloud-warning"><span class="glyphicon glyphicon-volume-up" style="position:relative;top:2px;" aria-hidden="true"></span> <b id="warning-content"></b></div>
<div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h4>Topic列表</h4>
        </div>
		<div class="form-body">
			<div class="form-group">
				<div class="col-md-6" style="padding-left:0px;">
					<button type="button" class="btn btn-sm" data-target="#addTopicModal" data-toggle="modal" title="新建topic">生产消息</button>
				  	<button type="button" class="btn btn-sm" onclick="initTopicList('topicSelectForConsumer')" data-target="#addConsumerModal" data-toggle="modal" title="新建消费者">消费消息</button>
				  	<button type="button" class="btn btn-sm" onclick="initTopicList('topicSelect')" data-target="#buildRelationshipModal" data-toggle="modal" title="关联生产者和消费者">关联资源</button>
			  	  	<button type="button" class="btn btn-sm" onclick="batchAssociateModalShow()" data-toggle="tooltip" title="将自己拥有的生产者和消费者批量授权给他人">批量授权</button>
					<button type="button" class="btn btn-sm" data-toggle="modal" data-target="#ipSearchModal" title="根据ip搜索生产者或消费者">搜索ip</button>
				</div>
		        <div class="col-md-6 text-right" style="padding-right:0px;">
		       	 	<form class="form-inline" id="topicList">
	       		  	   <#if userInfo.user.type == 1>
				  	     <div class="form-group">
						    <select id="topicSearchSelect" class="selectpicker" title="搜索topic" data-live-search-placeholder="输入任意字母" name="topic" data-live-search="true"></select>
				 	     </div>
				 	   <#else>
				 	     <div class="form-group">
				    	    <input type="text" class="form-control" name="topic" value="<#if response.OK>${response.result.queryTopic!}</#if>" placeholder="Topic名字">
				  	     </div>
						 <button type="submit" onclick="searchTopic()" class="btn btn-search"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
				  	   </#if>
				  	</form>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="row">
	<br/>
	<div class="col-md-12">
        <table class="table table-striped table-hover" style="margin-top: 0px">
		        <colgroup>
					<col width="50px">
					<col>
					<col width="100px">
					<col width="100px">
					<col width="100px">
					<col width="100px">
					<col width="300px">
					<col width="45px">
				</colgroup>
                <thead>
	                <tr>
	                	<td>序号</td>
	                    <td>Topic</td>
	                    <td data-toggle="tooltip" title="上一分钟生产的消息数量">生产量</td>
	                    <td data-toggle="tooltip" title="上一分钟消费的消息数量">消费量</td>
	                    <td data-toggle="tooltip" title="上一分钟生产的消息大小">生产大小</td>
	                    <td data-toggle="tooltip" title="上一分钟消费的消息大小">消费大小</td>
	                    <td>用途</td>
	                    <td>操作</td>
	                </tr>
                </thead>
                <tbody>
	                <#if !response.OK || !response.result.topicTrafficVOList??>
					     <tr>
		                    <td colspan="7"class="text-center" >
		                    	暂无数据
		                    </td>
		                <tr>
					<#else>
						<#list response.result.topicTrafficVOList as topicTrafficVO>
							<tr>
								<td>${(pagination.result.currentPage - 1)*pagination.result.numOfPage + topicTrafficVO_index + 1}</td>
		                    	<td><a title="查看详情" href="${request.contextPath}/user/topic/${topicTrafficVO.id}/detail">${topicTrafficVO.name}</a></td>
		                    	<#if topicTrafficVO.topicTraffic??>
		                    		<td>${topicTrafficVO.topicTraffic.countFormat}</td>
		                    	<#else>
		                    		<td>0</td>
								</#if>
		                    	<#if topicTrafficVO.consumerTraffic??>
		                    		<td>${topicTrafficVO.consumerTraffic.countFormat}</td>
		                    	<#else>
		                    		<td>0</td>
								</#if>
								<#if topicTrafficVO.topicTraffic??>
		                    		<td>${topicTrafficVO.topicTraffic.sizeFormat}</td>
		                    	<#else>
		                    		<td>0</td>
								</#if>
								<#if topicTrafficVO.consumerTraffic??>
		                    		<td>${topicTrafficVO.consumerTraffic.sizeFormat}</td>
		                    	<#else>
		                    		<td>0</td>
								</#if>
								<#if topicTrafficVO.own>
									<td class="edit-text">
										<#if topicTrafficVO.info?? && topicTrafficVO.info !=''> 
											<span style="cursor:pointer" data-toggle="tooltip" title="修改用途" onclick="updateTopicInfoShow(${topicTrafficVO.id}, '${topicTrafficVO.name}', '${topicTrafficVO.info}')">${topicTrafficVO.info!}</span>
				           				<#else>
			            					<span onclick="updateTopicInfoShow(${topicTrafficVO.id}, '${topicTrafficVO.name}', '${topicTrafficVO.info!}')" class="glyphicon glyphicon-pencil pointer" data-toggle="tooltip" title="添加用途" aria-hidden="true"></span>
				           				</#if>
									</td>
								<#else>
									<td>${topicTrafficVO.info!}</td>
								</#if>
								<td>
									<#if topicTrafficVO.own>
										<button type="button" class="btn btn-warning btn-xs" data-target="#deleteTopicModal${topicTrafficVO_index}" data-toggle="modal" title="删除${topicTrafficVO.name}"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
										<!-- 删除topic -->
										<div id="deleteTopicModal${topicTrafficVO_index}" class="modal fade" tabindex="-1">
											<div class="modal-dialog" style="width:400px">
												<div class="modal-content">
													<div class="modal-header">
														<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
														<h4 class="modal-title">删除确认</h4>
													</div>
													<form class="form-inline form-bordered form-row-stripped">
														<div class="modal-body">
																<div class="form-group text-center">
																	<span>确定删除 <b>${topicTrafficVO.name}</b> 吗?</span>
																</div>
														</div>
														<div class="modal-footer">
															<button type="button" data-dismiss="modal" class="btn" >取消</button>
															<button type="button" class="btn btn-primary" onclick="deleteTopic(${topicTrafficVO.id})" id="deleteTopicBtn${topicTrafficVO.id}">确定</button>
														</div>
													</form>
												</div>
											</div>
										</div>
									</#if>
								</td>
		                   	</tr>
						</#list>
					</#if>
                </tbody>
           </table>
    </div>
</div>

<ul id="pagination" data-url="${request.contextPath}/user/topic?topic=<#if response.OK>${response.result.queryTopic!}</#if>" style="float:right"></ul>
<#include "../inc/pagination.html">

<!-- 新建topic -->
<div id="addTopicModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span class="h4">新建Topic</span> <span class="nostyleA" data-toggle="tooltip" data-placement="bottom" title="点击查看下面各项的详细释义"><a href="/wiki/userGuide/produceAndConsume#createTopic" target=_blank class="glyphicon glyphicon-question-sign"></a></span>
			</div>
			<form class="form-horizontal form-bordered form-row-stripped" id="addTopicForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3"> 组名: </label>
							        <div class="col-md-5">
										<input type="text" id="teamNameInput" name="teamName" value="" placeholder="组名简称" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 业务名: </label>
							        <div class="col-md-5">
										<input type="text" id="bizNameInput" name="bizName" value="" placeholder="业务简称" class="form-control" />
									</div>
								</div>
								<div class="form-group">
										<label class="control-label col-md-3"> Topic: </label>
							        <div class="col-md-5">
										<input type="text" id="topicNameInput" name="name" value="" readonly="readonly"
											placeholder="组名-业务名-topic" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" data-toggle="modal" title="这里的队列数量是指每个broker上的队列数，一般至少有4个broker，如果这里填8，那么共有32个队列"> 队列数量: </label>
									<div class="col-md-5">
										<input type="text" id="topicNumInput" name="queueNum" value="8" 
										placeholder="默认为8，不建议修改" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 生产者: </label>
									<div class="col-md-5">
										<input type="text" id="producerInput" name="producer" value="" readonly="readonly"
										placeholder="组名-业务名-topic-producer" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 消息量: </label>
									<div class="col-md-5">
										<div class="input-group">
											<select name="qpd" class="form-control">
												<option value="10000">1万</option>
												<option value="100000">10万</option>
												<option value="1000000">100万</option>
												<option value="10000000">1000万</option>
												<option value="100000000">1亿</option>
												<option value="1000000000">10亿</option>
											</select>
											<span class="input-group-addon">条/天</span>
	    								</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 高峰消息量: </label>
									<div class="col-md-5">
										<div class="input-group">
											<select name="qps" class="form-control">
												<option value="100">100</option>
												<option value="1000">1000</option>
												<option value="10000">1万</option>
												<option value="100000">10万</option>
												<option value="1000000">100万</option>
												<option value="10000000">1000万</option>
											</select>
											<span class="input-group-addon">条/秒</span>
	    								</div>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 使用环境: </label>
									<div class="col-md-5 checkbox">
										<label data-toggle="tooltip" title="开启后，会在线上集群上创建该topic">
										    <input onclick="enableTestEnv()" type="radio" name="testEnabled" value="0" checked>线上
										</label>
										<label data-toggle="tooltip" title="开启后，会在测试集群上创建该topic">
										    <input onclick="disableTestEnv()" type="radio" name="testEnabled" value="1">测试
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3" data-toggle="tooltip" title="序列化方式一旦选择，不可更改，请谨慎！"> 序列化方式: </label>
									<div class="col-md-5 checkbox">
										<label data-toggle="tooltip" title="优点：大多数情况下压缩比高，性能好。缺点：兼容性差，消费方须用Protobuf反序列化。如果此topic自己使用，建议选择此种方式序列化。">
									    	<input type="radio" name="serializer" value="0">Protobuf</input>
									    </label>
									    <label data-toggle="tooltip" title="优点：可以使用json或xml，跨语言。缺点：性能和压缩比不高。如果此topic别人消费，建议使用此种方式序列化。">
									    	<input type="radio" name="serializer" value="1">String</input>
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 用途: </label>
									<div class="col-md-5">
										<textarea type="text" name="info" rows="3" class="form-control" placeholder="请填写"></textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">更多设置</label>
									<div class="col-md-5 checkbox">
									<span onclick="showExtendConfig(this)" class="pointer glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
									</div>
								</div>
								<!-- 以下选项默认隐藏 -->
								<div id="extendConfig" class="hide">
									<div class="form-group">
										<label class="control-label col-md-3"> 消息顺序: </label>
										<div class="col-md-5 checkbox nostyleA">
											<label data-toggle="tooltip" title="点击查看释义">
											    <input type="radio" name="ordered" value="0" checked><a target=_blank href="/wiki/userGuide/clientConsumer#normalOrder">局部有序</a>
											</label>
											<label data-toggle="tooltip" title="在分布式系统中保持全局消息有序有性能损耗，请谨慎使用。点击查看释义。">
												<input type="radio" name="ordered" value="1"><a target=_blank  href="/wiki/userGuide/clientConsumer#strictOrder">全局有序</a>
											</label>
										</div>
									</div>
									<div class="form-group" id="traceForm">
										<label class="control-label col-md-3"> 开启trace: </label>
										<div class="col-md-5 checkbox">
											<label>
											    <input type="radio" name="traceEnabled" value="0" checked>否
											</label>
											<label data-toggle="tooltip" title="开启后，生产者会自动启用trace功能">
											    <input type="radio" name="traceEnabled" value="1">是
											</label>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3"> 支持事务: </label>
										<div class="col-md-5 checkbox">
											<label>
											    <input type="radio" name="transactionEnabled" value="0" checked>否
											</label>
											<label data-toggle="tooltip" title="开启后，会在事务集群上创建该topic">
											    <input type="radio" name="transactionEnabled" value="1">是
											</label>
										</div>
									</div>
									<div class="form-group">
										<label class="control-label col-md-3"> 消息延迟: </label>
										<div class="col-md-5 checkbox">
											<label data-toggle="tooltip" title="该topic内不会发送延迟消息">
											    <input type="radio" name="delayEnabled" value="0" checked>否
											</label>
										   	<label data-toggle="tooltip" title="该topic内会发送延迟消息">
											    <input type="radio" name="delayEnabled" value="1">是
										   	</label>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >取消</button>
					<button type="submit" class="btn btn-primary" id="addTopicBtn" disabled="disabled">确定</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 新建消费者 -->
<div id="addConsumerModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span class="h4">消费Topic</span> <span class="nostyleA" data-toggle="tooltip" data-placement="bottom" title="点击查看下面各项的详细释义"><a href="/wiki/userGuide/produceAndConsume#consumeTopic" target=_blank class="glyphicon glyphicon-question-sign"></a></span>
			</div>
			<form class="form-horizontal form-bordered form-row-stripped" id="addConsumerForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3"> Topic: </label>
									<div class="col-md-6">
										<select id="topicSelectForConsumer" class="selectpicker" title="请选择" data-live-search-placeholder="搜索" name="tid" data-live-search="true">
										</select>
									</div>
								</div>
								<div class="form-group">
										<label class="control-label col-md-3"> 消费者: </label>
							        <div class="col-md-6">
										<input type="text" id="consumerNameInput" name="consumer" value=""
											placeholder="组名-业务名-部分topic名-consumer" class="form-control" />
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 消费方式: </label>
									<div class="col-md-6 checkbox">
										<label data-toggle="tooltip" title="所有的消费者均分消息进行消费">
										    <input onclick="consumerWayChange(0)" type="radio" name="consumeWay" value="0" checked>集群消费
										</label>
									    <label data-toggle="tooltip" title="每个消费者会消费所有消息">
										    <input onclick="consumerWayChange(1)" type="radio" name="consumeWay" value="1">广播消费
									    </label>
									</div>
								</div>
								<div class="form-body">
									<div class="form-group">
										<label class="control-label col-md-3" data-toggle="tooltip" title="消息流量控制"> 流控: </label>
										<div class="col-md-6">
											<input type="text" id="permitsPerSecondInput" data-toggle="tooltip" name="permitsPerSecond" value="" placeholder="最小为1，建议设为20，根据业务设置" data-toggle="tooltip" title="每个实例每秒最多消费多少条消息" class="form-control" />
										</div>
									</div>
								</div>
								<div class="form-group hide" id="traceDiv">
									<label class="control-label col-md-3"> 开启Trace: </label>
									<div class="col-md-6 checkbox">
										<label data-toggle="tooltip" title="广播模式下不建议开启Trace">
											<input type="radio" name="traceEnable" value="0" checked>否
										</label>
										<label data-toggle="tooltip" title="开启后，消费者会自动启用trace功能">
										    <input type="radio" name="traceEnable" value="1">是
										</label>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 用途: </label>
									<div class="col-md-6">
										<textarea type="text" name="info" rows="3" class="form-control" placeholder="请填写"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >取消</button>
					<button type="submit" class="btn btn-primary" id="addConsumerBtn" disabled="disabled">确定</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 老用户入口 -->
<div id="buildRelationshipModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span class="h4">建立联系</span> <span class="nostyleA" data-toggle="tooltip" data-placement="bottom" title="点击查看下面各项的详细释义"><a href="/wiki/userGuide/produceAndConsume#oldUser" target=_blank class="glyphicon glyphicon-question-sign"></a></span>
			</div>
			<form class="form-horizontal form-bordered form-row-stripped" id="buildRelationshipForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3"> Topic: </label>
									<div class="col-md-5">
										<select id="topicSelect" class="selectpicker" title="请选择" data-live-search-placeholder="搜索" name="tid" data-live-search="true">
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3"> 我是: </label>
									<div class="col-md-5 checkbox">
										<label>
										    <input type="radio" name="role" onclick="selectProducer()" value="0">生产者
										</label>
										<label>
										    <input type="radio" name="role" onclick="selectConsumer()" value="1">消费者
										</label>
									</div>
								</div>
								<div id="producerGroup" class="form-group" style="display:none;">
									<label class="control-label col-md-3"> 生产者: </label>
									<div class="col-md-5">
										<input type="text" id="producerGroupInput" name="producer" value="" 
										placeholder="请输入producer group" class="form-control" />
									</div>
								</div>
								<div id="consumerGroup" class="form-group" style="display:none;">
									<label class="control-label col-md-3"> 消费者: </label>
									<div class="col-md-5">
										<select id="consumerSelect" class="selectpicker" title="请选择consumer group" data-live-search-placeholder="搜索" name="cid" data-live-search="true">
										</select>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >取消</button>
					<button type="button" class="btn btn-primary" id="associateBtn" onclick="buildRelationship()">确定</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 按ip搜索topic入口 -->
<div id="ipSearchModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog" style="width:800px;">
		<div class="modal-content">
			<!-- header -->
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span class="h4">根据ip搜索生产者或消费者</span> <span class="nostyleA" data-toggle="tooltip" data-placement="bottom" title="点击查看下面各项的详细释义"><a href="/wiki/userGuide/produceAndConsume#searchIp" target=_blank class="glyphicon glyphicon-question-sign"></a></span>
			</div>
			<!-- body -->
			<div class="modal-body">
				<form class="form-inline" id="ipSearchForm" style="float:right">
					<div style="float:left;margin:10px 0px;">
						<!-- 时间 -->
						<div class="form-group time">
							<label for="timePicker" title="">日期: </label>
							<input id="timePicker" name="date" type="text" class="Wdate form-control" onclick="WdatePicker({ dateFmt: 'yyyy-MM-dd',maxDate:'%y-%M-%d',minDate:'%y-%M-{%d-7}'})" style="width:180px;height:34px;cursor:pointer;" readonly="readonly"
								   value="${(.now?long-3600000)?number_to_date?string("yyyy-MM-dd")}">
						</div>
						<!-- ip -->
						<div class="form-group time">
							<input type="text" class="form-control" id="ip" name="ip" placeholder="可以只写ip的前边部分">
						</div>
						<!-- 查询按钮 -->
						<button type="button" data-toggle='tooltip' title="查询一天的链接" onclick="searchTopicByIp()" class="btn btn-search time"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
					</div>
				</form>
				<br>
				<!-- table -->
				<table id="dataTable" class="table table-striped table-hover" style="margin-top: 0px;word-break:break-all; word-wrap:break-all;">
					<colgroup>
						<col width="180px">
					</colgroup>
					<thead>
					<tr>
						<td title="ip归属的消费者">消费者</td>
						<td title="ip归属的生产者">生产者</td>
						<td title="关联的topic">topic</td>
					</tr>
					</thead>
					<tbody>
					<tr class="no_more_data"><td colspan=3 class="text-center">暂无数据</td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<!-- 历史消息 -->
<div id="messageModel" class="modal fade" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog" style="width:800px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title">全部消息</h4>
			</div>
			<table class="table table-striped table-hover" style="margin-top: 0px">
				<thead>
					<colgroup>
					  <col width='50px'></col>
					  <col></col>
					  <col width='50px'></col>
					  <col width='160px'></col>
					</colgroup>
					<tr>
						<td>序号</td>
						<td>消息</td>
						<td>状态</td>
						<td>审核时间</td>
					</tr>
				</thead>
				<tbody id="messageBody">
				</tbody>
			</table>
		</div>
	</div>
</div> <!-- 历史消息结束 -->

<#--修改topic描述-->
<div id="updateTopicInfoModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title"><b id="topicName"></b>描述更新</h4>
			</div>
			<form class="form-horizontal form-bordered form-row-stripped" id="addUserProducerModalForm">
				<div class="modal-body">
					<div class="row">
						<div class="col-md-12">
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3"> 用途: </label>
									<div class="col-md-8">
										<input type="hidden" id="topicId">
										<textarea id="topicInfo" rows="5" class="form-control"></textarea>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >取消</button>
					<button type="button" class="btn btn-primary" id="updateTopicInfoBtn" onclick="updateTopicInfo()">确定</button>
				</div>
			</form>
		</div>
	</div>
</div> 

<!-- 批量关联 -->
<div id="batchAssociateModal" class="modal fade" tabindex="-1" aria-hidden="true">
	<div class="modal-dialog" style="width:800px">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<span class="h4">批量授权</span> <span class="nostyleA" data-toggle="tooltip" data-placement="bottom" title="点击查看下面各项的详细释义"><a href="/wiki/userGuide/produceAndConsume#batchAuth" target=_blank class="glyphicon glyphicon-question-sign"></a></span>
			</div>
			<div class="row">
				<div class="col-md-12">
					<div class="form-body">
						<div class="form-group">
							<label class="control-label col-md-3"> 第一步，选择用户: </label>
					        <div class="col-md-9">
								<select id="userSearchSelect" multiple class="selectpicker" title="请选择" data-live-search-placeholder="搜索" name="user" data-live-search="true"></select>
							</div>
						</div>
					</div>
				</div>
			</div>
			<hr>
			<b>&nbsp;&nbsp;&nbsp;第二步，选择生产者、消费者:</b>
			<br><br>
			<table class="table table-striped table-hover" style="margin-top: 0px">
				<thead>
					<colgroup>
					  <col width='50px'>
					  <col width='350px'>
					  <col width='60px'>
					  <col> 
					  <col width='70px'>
					</colgroup>
					<tr>
						<td>序号</td>
						<td>Topic</td>
						<td>角色</td>
						<td></td>
						<td><input onclick="clickAll()" id="allBox" type="checkbox"></td>
					</tr>
				</thead>
				<tbody id="topicsBody">
				</tbody>
			</table>
			<div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn" >取消</button>
				<button type="button" class="btn btn-primary" id="batchAssociateBtn" onclick="batchAssociate()">确定</button>
			</div>
		</div>
	</div>
</div> <!-- 批量授权结束 -->

<script type="text/javascript">
	/**
	 * 查询topic
	 */
	function searchTopic(){
		window.location.href="${request.contextPath}/user/topic?"+$("#topicList").serialize();
	}
	
	$(function(){
		$("[data-toggle='tooltip']").tooltip({container: 'body'});
		$("[data-toggle='modal']").tooltip();
		
		// 初始化topic列表
  		<#if userInfo.user.type == 1>
	  		$("#topicSearchSelect").selectpicker({
	  			width : 300
	  	 	});
	  		initTopicList('topicSearchSelect', true);
 	 	</#if>
		
		// 获取通知
		$.get('${request.contextPath}/notice',
	        function(data){
	            if(data.status == 200){
	            	$('#mqcloud-warning').show();
					$('#warning-content').html(data.result.content);
			    }
	        }, 'json');
		
   		// 展示铃铛
   		$("#notifyBox").show();
		// 获取用户未读消息
		$.get('${request.contextPath}/user/notice',
	        function(data){
            	$("#notifyBox").parent().css("padding-top", "7px");
	            if(data.status == 200){
	        	    MessagePlugin.init({
	        	        elem: "#notifyBox",
	        	        msgData: data.result,
        	            msgUnReadData: data.result.length,
        	            msgClick: function(obj) {
        	                read($(obj).attr("data"));
        	            },
        	            allRead: function(obj) {
        	            	readAll();
        	            },
        	            getNodeHtml: function(obj, node) {
        	                if (obj.readStatus == 1) {
        	                    node.isRead = true;
        	                } else {
        	                    node.isRead = false;
        	                }
        	                var html = "<p>"+ obj.text +"</p>";
        	                node.html = html;
        	                return node;
        	            },
        	            allMsg: "allMessage()"
	        	   });
			    } else {
			    	MessagePlugin.init({
	        	        elem: "#notifyBox",
	        	        allMsg: "allMessage()",
	        	        msgClick: function(obj) {
        	                read($(obj).attr("data"));
        	            },
        	            allRead: function(obj) {
        	            	readAll();
        	            },
        	            getNodeHtml: function(obj, node) {
        	                if (obj.readStatus == 1) {
        	                    node.isRead = true;
        	                } else {
        	                    node.isRead = false;
        	                }
        	                var html = "<p>"+ obj.text +"</p>";
        	                node.html = html;
        	                return node;
        	            }
	        	   });
			    }
        }, 'json');
		
		// 下拉框change事件
		$('#topicSelect').on('changed.bs.select',function(e, clickedIndex, newValue, oldValue){
			if($("#consumerGroup").is(":visible")){
				refreshConsumerSelect($(this).val());
			}
		});
		// 下拉框change事件
		$('#topicSelectForConsumer').on('changed.bs.select',function(e, clickedIndex, newValue, oldValue){
			if (topicMap[$(this).val()] == 0){
				$("#traceDiv").addClass('hide');
				$("input[name='traceEnable'][value='0']").prop("checked",true);
				$("input[name='traceEnable'][value='1']").prop("checked",false);
			} else {
				$("#traceDiv").removeClass('hide');
			}
			
		});
		
		
		// 用户topic表单校验
        $('#addTopicForm').bootstrapValidator({
    　　　　　　	message: 'This value is not valid',
                fields: {
                	teamName: {
                        validators: {
                        	notEmpty: {
                                message: '组名不能为空'
                            },
    	                     regexp: {
    	                         regexp: /^[a-zA-Z0-9_\-]+$/,
    	                         message: '只能包含大小写英文字符，数字，下划线，中划线'
    	                     }
                        }
                    },
                    bizName: {
                        validators: {
                        	notEmpty: {
                                message: '业务名不能为空'
                            },
    	                     regexp: {
    	                         regexp: /^[a-zA-Z0-9_\-]+$/,
    	                         message: '只能包含大小写英文字符，数字，下划线，中划线'
    	                     }
                        }
                    },
                    queueNum: {
                        validators: {
                            notEmpty: {
                                message: '队列数量不能为空'
                            },
                            between: {
    	                         min: 1,
    	                         max: 20,
    	                         message: '队列数量需介于1和20之间'
    	                     }
                        }
                    },
                    serializer: {
                    	validators: {
                            notEmpty: {
                                message: '请选择序列化方式'
                            }
                        }
                    },
                    info: {
                    	validators: {
                            notEmpty: {
                                message: '请填写用途'
                            }
                        }
                    }
                }
        }).on('success.form.bv', function(e) {
            // 阻止默认事件提交
            e.preventDefault();
 		   	disable("addTopicBtn");
    		$.post('${request.contextPath}/topic/add',
   				$("#addTopicForm").serialize(),
   		        function(data){
   		            if(data.status == 200){
   						toastr.success("操作成功，请稍后查看");  
   						modalHide(3000, function(){
	   						$("#addTopicForm")[0].reset();
	   						$("#addTopicForm").data('bootstrapValidator').resetForm();
	   						enable("addTopicBtn");
   						});
   				    }else{
   				    	toastr.error("操作失败！"+data.message);  
   				    	enable("addTopicBtn");
   				    }
   		        }, 'json');
        });
		
		// topic change事件
		$("#teamNameInput").bind('input propertychange', function(){
			$("#topicNameInput").val($(this).val()+"-"+$("#bizNameInput").val()+"-topic");
			$("#producerInput").val($("#topicNameInput").val()+"-producer");
		});
		$("#bizNameInput").bind('input propertychange', function(){
			$("#topicNameInput").val($("#teamNameInput").val()+"-"+$(this).val()+"-topic");
			$("#producerInput").val($("#topicNameInput").val()+"-producer");
		});
		
		
		// 用户消费表单校验
        $('#addConsumerForm').bootstrapValidator({
    　　　　　　	message: 'This value is not valid',
                　		feedbackIcons: {
                    　　　　　　　　valid: 'glyphicon glyphicon-ok',
                    　　　　　　　　invalid: 'glyphicon glyphicon-remove',
                    　　　　　　　　validating: 'glyphicon glyphicon-refresh'
                　　　　　　　　   },
                fields: {
                	consumer: {
                        validators: {
                        	notEmpty: {
                                message: '消费者不能为空'
                            },
    	                     regexp: {
    	                         regexp: /^[a-zA-Z0-9_-]+$/,
    	                         message: '只能包含大小写英文字母,数字,下划线,中划线'
    	                     }
                        }
                    },
                    tid: {
                        validators: {
                        	notEmpty: {
                                message: '请选择Topic'
                            }
                        }
                    },
                    permitsPerSecond: {
                        validators: {
                            notEmpty: {
                                message: '流控值不能为空'
                            },
                            callback: {
                                message: '流控值只能为正整数',
                                callback: function(value, validator) {
                                    var tps = Number($("#permitsPerSecondInput").val());
                                	if(tps < 1){
                                		return false;
                                	}
                                	if(!Number.isInteger(tps)){
                                		return false;
                                	}
                                	return true;
                                }
                            }
                        }
                    },
                    info: {
                    	validators: {
                            notEmpty: {
                                message: '请填写用途'
                            }
                        }
                    }
                }
        }).on('success.form.bv', function(e) {
            // 阻止默认事件提交
            e.preventDefault();
 		   	disable("addConsumerBtn");
    		$.post('${request.contextPath}/consumer/add',
   				$("#addConsumerForm").serialize(),
   		        function(data){
   		            if(data.status == 200){
   						toastr.success("操作成功，请稍后查看");  
   						modalHide(3000, function(){
	   						$("#addConsumerForm")[0].reset();
	   						$("#addConsumerForm").data('bootstrapValidator').resetForm();
	   						enable("addConsumerBtn");
   						});
   				    }else{
   				    	toastr.error("操作失败！"+data.message);
   				    	enable("addConsumerBtn");
   				    }
   		        }, 'json');
        });
		
		
		// select change
		$('#topicSearchSelect').on('changed.bs.select', function(e) {
			searchTopic();
		});
		
		
	 	$("#userSearchSelect").selectpicker({
			width : 500
	 	});
	});
	
	/**
	 * 查看所有消息
	 */
	function allMessage(){
		$.get('${request.contextPath}/user/notice/all',
	        function(data){
				$("#messageBody").html(data);
				$("#messageModel").modal("show");
	        });
	}

	/**
	 * 全部读取消息
	 */
	function readAll(){
		$.post('${request.contextPath}/user/notice/read/all',
	        function(data){
	            if(data.status == 200){
	            	for(var i in MessagePlugin.option.msgData){
	            		var data = MessagePlugin.option.msgData[i];
	            		data.readStatus = 1;
	            	}
	        		$("#notifyBox").find(".bell-dot").remove();
	            	$(".message-frame").find(".badge-dot").remove();
			    }
        }, 'json');
	}
	
	/**
	 * 标记消息已读
	 */
	function read(mid){
		$.post('${request.contextPath}/user/notice/'+mid+'/read',
	        function(data){
	            if(data.status == 200){
	            	var allRead = true;
	            	for(var i in MessagePlugin.option.msgData){
	            		var msgData = MessagePlugin.option.msgData[i];
	            		if(msgData.id == mid){
	            			msgData.readStatus = 1;
	            		}
	            		if(msgData.readStatus == 0){
	            			allRead = false;
	            		}
	            	}
	            	if(allRead){
	            		$("#notifyBox").find(".bell-dot").remove();
	            	}
			    }
        }, 'json');
	}
	
	/**
	 * 初始化topic下拉列表
	 */
	 // 保存topic是否支持trace
	var topicMap = {};
	function initTopicList(componentId, needName){
		$.get('${request.contextPath}/topic/list',
		        function(data){
		            if(data.status == 200){
		            	var content = "";
		            	for(var i in data.result){
		            		var topic = data.result[i];
		            		if(needName){
		            			content += "<option value='"+topic.name+"'>"+topic.name+"</option>";
		            		} else {
			            		content += "<option value='"+topic.id+"'>"+topic.name+"</option>";
			            		if (componentId == "topicSelectForConsumer"){
			            			topicMap[topic.id] = topic.traceEnabled;
		            			}
		            		}
		            	}
		        		$("#"+componentId).html(content);
		        		$("#"+componentId).selectpicker('refresh');
		        		if(needName){
		        			<#if response.OK && response.result.queryTopic??>
				        		$('#' + componentId).selectpicker('val', '${response.result.queryTopic}');
		        			</#if>
		        		}
				    }else{
				    	toastr.error("数据获取失败！"+data.message);  
				    }
	        }, 'json');
	}
	
	/**
	 * 选择生产者单选按钮
	 */
	function selectProducer(){
		$("#producerGroup").show();
		$("#consumerGroup").hide();
	}
	
	/**
	 * 选择消费者单选按钮
	 */
	function selectConsumer(){
		$("#producerGroup").hide();
		$("#consumerGroup").show();
		var topicId = $("#topicSelect").val();
		refreshConsumerSelect(topicId);
	}
	/**
	 * 刷新消费者下拉框
	 */
	function refreshConsumerSelect(topicId){
		if(!topicId){
			return;
		}
		$.get('${request.contextPath}/consumer/list',
				{
					tid: topicId
				},
		        function(data){
		            if(data.status == 200){
		            	var content = "";
		            	for(var i in data.result){
		            		var consumer = data.result[i];
		            		content += "<option value='"+consumer.id+"'>"+consumer.name+"</option>";
		            	}
		        		$("#consumerSelect").html(content);
		        		$("#consumerSelect").selectpicker('refresh');
				    }else{
				    	toastr.error("数据获取失败！"+data.message);  
				    }
	        }, 'json');
	}
	
	/**
	 * 建立关联
	 */
	function buildRelationship(){
		if(!$("#topicSelect").val()){
			alert("请先选择Topic");
			return;
		}
		var role = $("input[name='role']:checked").val();
		var module = "";
		if(role == 0) {
			if(!$("#producerGroupInput").val()){
				alert("请先填写生产者名字");
				return;
			}
			module = "topic"
		} else if(role == 1){
			if(!$("#consumerSelect").val()){
				alert("请选择消费者");
				return;
			}
			module = "consumer"
		} else {
			alert("请选择生产者还是消费者");
			return;
		}
		if(!module){
			alert("参数错误");
			return;
		}
		disable("associateBtn");
		$.post('${request.contextPath}/'+module+'/associate',
				$("#buildRelationshipForm").serialize(),
		        function(data){
		            if(data.status == 200){
		            	toastr.success("申请成功！请耐心等待！");  
		            	modalHide(3000, function(){
		            		enable("associateBtn");
			            	$("#buildRelationshipForm")[0].reset();
		            	});
				    }else{
				    	toastr.error("申请失败！"+data.message);  
				    	enable("associateBtn");
				    }
	        }, 'json');
	}
	
	/**
	 * 删除topic
	 */
	function deleteTopic(tid){
		disable("deleteTopicBtn"+tid);
		$.post('${request.contextPath}/topic/delete/'+tid,
	        function(data){
	            if(data.status == 200){
	            	toastr.success("申请成功！请耐心等待！");  
	            	modalHide(3000, function(){
	            		enable("deleteTopicBtn"+tid);
	            	});
			    }else{
			    	toastr.error("申请失败！"+data.message);  
			    	enable("deleteTopicBtn"+tid);
			    }
        }, 'json');
	}
	
	
	// 拉取消息
	function fetchMessage(){
		$.get('${request.contextPath}/user/notice',
	        function(data){
	            if(data.status == 200){
	            	var refresh = false;
	            	outer: for(var i in data.result) {
	            		var msg = data.result[i];
	            		if(MessagePlugin.option.msgData.length > 0){
		            		for(var j in MessagePlugin.option.msgData) {
		            			var exitMsg = MessagePlugin.option.msgData[j];
		            			if(msg.id != exitMsg.id) {
		            				refresh = true;
		            				break outer;
		            			}
		            		}
	            		} else {
	            			refresh = true;
	            			break;
	            		}
	            	}
	            	if(refresh) {
	            		MessagePlugin.refresh(0, {
    	        	        msgData: data.result,
            	            msgUnReadData: data.result.length
    	        	   	});
	            	}
			    }
        }, 'json');
	}
	//长轮询，30秒发送一次ajax请求
	window.setInterval(fetchMessage, 30000);
	
function consumerWayChange(type){
	if (type == 1){
		$("input[name='traceEnable'][value='1']").prop("checked",false);
		$("input[name='traceEnable'][value='0']").prop("checked",true);
		$("input[name='traceEnable']").prop("disabled",true);
	} else if (type == 0){
		$("input[name='traceEnable']").prop("disabled",false);
	}
}

function showExtendConfig(obj){
	if ($(obj).hasClass("glyphicon-chevron-down")){
		$("#extendConfig").removeClass('hide');
		$(obj).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
	} else {
		$("#extendConfig").addClass('hide');
		$(obj).removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
		// 重置默认
		$("input[name='traceEnabled'][value='1']").prop("checked",false);
		$("input[name='traceEnabled'][value='0']").prop("checked",true);
		$("input[name='transactionEnabled'][value='1']").prop("checked",false);
		$("input[name='transactionEnabled'][value='0']").prop("checked",true);
		$("input[name='delayEnabled'][value='1']").prop("checked",false);
		$("input[name='delayEnabled'][value='0']").prop("checked",true);
		$("input[name='ordered'][value='1']").prop("checked",false);
		$("input[name='ordered'][value='0']").prop("checked",true);
	}
}

	function searchTopicByIp() {
		if(!$("#ip").val()){
			alert("请输入ip地址");
			return;
		}
		post('${request.contextPath}/topic/search/ip',$("#ipSearchForm").serialize(),
				function(data){
					$("#dataTable tbody").remove();
					$("#dataTable").append(data);
				});
	}

	function updateTopicInfoShow(tid, topicName, info){
		$("#topicId").val(tid);
		$("#topicName").html(topicName);
		$("#topicInfo").val(info);
		$('#updateTopicInfoModal').modal('show');
	}
	
	function updateTopicInfo(){
		if(!$("#topicInfo").val()){
			alert("请输入用途");
			return;
		}
		disable("updateTopicInfoBtn");
		$.post('${request.contextPath}/topic/update/info',
				{
					info: $("#topicInfo").val(),
					tid: $("#topicId").val()
				},
		        function(data){
		            if(data.status == 200){
		            	toastr.success("操作成功！即将刷新页面！");  	            	
		            	reload(2000);            	
				    }else{
				    	toastr.error("操作失败！"+data.message);  
				    	enable("updateTopicInfoBtn");
				    }
		    }, 'json');
	}
	
	function enableTestEnv(){
		$("#traceForm").show();
	}
	function disableTestEnv(){
		$("#traceForm").hide();
	}
	
	
	function batchAssociateModalShow(){
		$.get('${request.contextPath}/user/batch/associate',
	        function(data){
				$("#topicsBody").html(data);
				initUserList('userSearchSelect');
				$('#batchAssociateModal').modal('show');
        	}
		);
	}
	
	function clickAll(){
		$(".authBox").prop("checked", $("#allBox").prop('checked'));
	}
	
	/**
	 * 初始化user下拉列表
	 */
	function initUserList(componentId){
		$.post('${request.contextPath}/user/list',
		        function(data){
		            if(data.status == 200){
		            	var content = "";
		            	for(var i in data.result){
		            		var user = data.result[i];
		            		var value = user.email.substring(0, user.email.indexOf("@"));
		            		if(user.name && user.name != value){
		            			value = user.name + "【" + value +"】";
		            		}
		            		content += "<option value='"+user.id+"'>"+value+"</option>";	
		            	}
		        		$("#"+componentId).html(content);
		        		$("#"+componentId).selectpicker('refresh');
				    }else{
				    	toastr.error("数据获取失败！"+data.message);  
				    }
	        }, 'json');
	}
	
	/**
	 * 批量关联
	 */
	function batchAssociate(){
		var uids = $("#userSearchSelect").val();
		if(!uids){
			alert("请选择用户!");
			return;
		}
		var producerIds = new Array();
		var consumerIds = new Array();
		$(".authBox:checked").each(function(){
			if($(this).attr("dataType") == 1) {
				producerIds.push($(this).val());
			} else {
				consumerIds.push($(this).val());
			}
		});
		if(producerIds.length == 0 && consumerIds.length == 0){
			alert("请选择生产者或消费者!");
			return;
		}
		if(confirm("确定授权给这"+uids.length+"个用户吗？")){
    		disable("batchAssociateBtn");
    		$.post('${request.contextPath}/user/batch/associate',{
    			uids: uids.join(","),
    			producerIds: producerIds.join(","),
    			consumerIds: consumerIds.join(",")
    			},function(data){
   		            if(data.status == 200){
   		            	toastr.success("申请成功！请耐心等待！");  
   		            	modalHide(3000, function(){
   		            		enable("batchAssociateBtn");
   		            	});
   				    }else{
   				    	toastr.error("申请失败！"+data.message);  
   				    	enable("batchAssociateBtn");
   				    }
   	        }, 'json');
    	}
	}
</script>